<template>
  <div class="box">
    <p style="margin-bottom: 10px;display: flex;flex-direction: row-reverse;">
      <el-button type="primary" @click="$router.back()">返回</el-button>
    </p>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="浏览数据" name="1">
        <el-row style="padding-left:30px" :gutter="20">
          <el-col
            :span="6"
          ><span>点赞数量 : {{ data.likesNum }}</span></el-col>
          <el-col
            :span="6"
          ><span>收藏数量 : {{ data.favoritesNum }}</span></el-col>
          <el-col
            :span="6"
          ><span>浏览数量 : {{ data.viewsNum }}</span></el-col>
          <el-col
            :span="6"
          ><span>留言人次 : {{ data.leaveMessageNum }}</span></el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="出售信息" name="2">
        <el-row style="padding-left:30px" :gutter="20">
          <el-col :span="4"><span style="font-weight:700">上架</span></el-col>
          <el-col
            :span="4"
          ><span>上架时间 : {{ getVehicleSaleInfo.addedTime }}</span></el-col>
          <el-col
            :span="5"
          ><span>车源ID : {{ getVehicleSaleInfo.carSourceNo }}</span></el-col>
        </el-row>
        <el-row style="padding-left:30px" :gutter="20">
          <el-col :span="4"><span style="font-weight:700">价格</span></el-col>
          <el-col
            :span="8"
          ><span>发布价格 : {{ getVehicleSaleInfo.amount }}万</span></el-col>
        </el-row>
        <el-row style="padding-left:30px" :gutter="20">
          <el-col
            :span="4"
          ><span style="font-weight:700">收款账号</span></el-col>
          <el-col
            :span="4"
          ><span>收款人 : {{ getVehicleSaleInfo.payee }}</span></el-col>
          <el-col
            :span="5"
          ><span>开户银行 : {{ getVehicleSaleInfo.openBank }}</span></el-col>
          <el-col
            :span="6"
          ><span>收款卡号 : {{ getVehicleSaleInfo.bankCardNo }}</span></el-col>
          <el-col
            :span="5"
          ><span>绑定手机 : {{ getVehicleSaleInfo.bindMobile }}</span></el-col>
        </el-row>
        <el-row style="padding-left:30px" :gutter="20">
          <el-col
            :span="4"
          ><span style="font-weight:700">交车详细地址</span></el-col>

          <el-col
            :span="4"
          ><span>交车人:{{ getVehicleSaleInfo.name }}</span></el-col>
          <el-col
            :span="5"
          ><span>手机号 : {{ getVehicleSaleInfo.mobile }}</span></el-col>
          <el-col
            :span="10"
          ><span>车辆所在地 : {{ getVehicleSaleInfo.address }}</span></el-col>
        </el-row>
      </el-collapse-item>

      <el-collapse-item title="车辆基础信息" name="3">
        <el-row style="padding-left:30px" :gutter="20">
          <el-col
            :span="6"
          ><span>车辆识别代号/VIN : {{ getBasicInfo.vin }}</span></el-col>
          <el-col
            :span="4"
          ><span>上牌时间 : {{ getBasicInfo.spTime }}</span></el-col>
          <el-col
            :span="4"
          ><span>上牌城市 : {{ getBasicInfo.spCity }}</span></el-col>
          <el-col
            :span="4"
          ><span>所在城市 : {{ getBasicInfo.vehicleCity }}</span></el-col>
          <el-col
            :span="4"
          ><span>是否首任车主 : {{ getBasicInfo.firstMaster ? "是" : "否" }}</span></el-col>
          <el-col
            :span="8"
          ><span v-if="getBasicInfo.brandModel ">品牌车系 : {{ getBasicInfo.brandModel }}</span></el-col>
          <!-- //使用性质:0-非运营，1-运营，2-营转非，3-租赁，4-教练 -->
          <el-col
            :span="4"
          ><span>使用性质 :
            {{
              getBasicInfo.useNature == 0
                ? "非运营"
                : getBasicInfo.useNature == 1
                  ? "运营"
                  : getBasicInfo.useNature == 2
                    ? "营转非"
                    : getBasicInfo.useNature == 3
                      ? "租赁"
                      : getBasicInfo.useNature == 4
                        ? "教练"
                        : ""
            }}</span></el-col>
          <el-col
            :span="4"
          ><span>过户次数 : {{ getBasicInfo.assignedNum }}</span></el-col>
          <el-col
            :span="4"
          ><span>车辆是否有抵押 :
            {{ getBasicInfo.isPledge == 0 ? "否" : "是" }}</span></el-col>
        </el-row>
      </el-collapse-item>

      <el-collapse-item title="加V优推" name="2">
        <el-row style="padding-left:30px" :gutter="20">
          <el-col
            :span="6"
          ><span>
            维保记录查询 : {{ data.maintenanceQueryTime }}
            <span
              v-if="data.maintenanceQueryTime"
              style="    cursor: pointer;
    color: blue;"
              @click="gotoUrl('', data.maintenanceReportUrl)"
            >报告详情</span>
          </span></el-col>
          <el-col
            :span="6"
          ><span>
            理赔记录查询 : {{ data.claimsQueryTime }}
            <span
              v-if="data.claimsQueryTime"
              style="    cursor: pointer;
    color: blue;"
              @click="gotoUrl('', data.claimsReportUrl)"
            >报告详情</span>
          </span></el-col>
          <el-col
            :span="6"
          ><span>
            非4S店诊断记录查询 : {{ data.diagnosisQueryTime }}
            <span
              v-if="data.diagnosisQueryTime"
              style="    cursor: pointer;
    color: blue;"
              @click="gotoUrl('非4S店诊断记录查询', data.diagnosisReportId)"
            >报告详情</span>
          </span></el-col>
          <el-col
            :span="6"
          ><span>
            调表查询 : {{ data.dashboardQueryTime }}
            <span
              v-if="data.dashboardQueryTime"
              style="    cursor: pointer;
    color: blue;"
              @click="gotoUrl('调表查询', data.dashboardOrderNo)"
            >报告详情</span>
          </span></el-col>
        </el-row>
      </el-collapse-item>

      <el-collapse-item title="车辆证件" name="4">
        <el-row style="padding-left:30px" :gutter="20">
          <el-col :span="8">
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="getVehicleImage.imgZy"
                  alt=""
                  :preview-src-list="[getVehicleImage.imgZy]"
                />
              </span>
              <span>行驶证主页</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="getVehicleImage.imgFyFront"
                  :preview-src-list="[getVehicleImage.imgFyFront]"
                  alt=""
                />
              </span>
              <span>行驶证副页（正面）</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="getVehicleImage.imgFyReverse"
                  :preview-src-list="[getVehicleImage.imgFyReverse]"
                  alt=""
                />
              </span>
              <span>行驶证副页（反面）</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="getVehicleImage.imgJdcdjzs12"
                  :preview-src-list="[getVehicleImage.imgJdcdjzs12]"
                  alt=""
                />
              </span>
              <span>机动车登记证书1、2页</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="getVehicleImage.imgJdcdjzs34"
                  :preview-src-list="[getVehicleImage.imgJdcdjzs34]"
                  alt=""
                />
              </span>
              <span>机动车登记证书3、4页</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="getVehicleImage.imgJdcdjzs56"
                  :preview-src-list="[getVehicleImage.imgJdcdjzs56]"
                  alt=""
                />
              </span>
              <span>机动车登记证书5、6页</span>
            </div>
          </el-col>
        </el-row>
      </el-collapse-item>

      <el-collapse-item title="车辆照片视频" name="5">
        <el-row style="padding-left:30px" :gutter="20">
          <p style="padding-left: 30px;line-height: 50px;font-weight: 800;">
            展示主图
          </p>
          <el-col :span="8">
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="getVehicleImage.mainImage"
                  :preview-src-list="[getVehicleImage.mainImage]"
                  alt=""
                />
              </span>
              <span>车辆左前45°角</span>
            </div>
          </el-col>
        </el-row>
        <el-row
          v-if="getVehicleImage.exteriorImage"
          style="padding-left:30px"
          :gutter="20"
        >
          <p style="padding-left: 30px;line-height: 50px;font-weight: 800;">
            车身外观
          </p>
          <el-col
            v-for="item in getVehicleImage.exteriorImage"
            :key="item.imgType"
            :span="8"
          >
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="item.imageUrl"
                  :preview-src-list="[item.imageUrl]"
                  alt=""
                />
              </span>
              <span>{{
                item.imgType == 101
                  ? "车辆左前45度角"
                  : item.imgType == 102
                    ? "车辆右后45度角"
                    : item.imgType == 103
                      ? "主驾前侧"
                      : item.imgType == 104
                        ? "主驾后侧"
                        : item.imgType == 105
                          ? "副驾前侧"
                          : item.imgType == 106
                            ? "副驾后侧"
                            : item.imgType == 111
                              ? "左前大灯"
                              : item.imgType == 112
                                ? "右前大灯"
                                : item.imgType == 113
                                  ? "左尾灯"
                                  : item.imgType == 114
                                    ? "右尾灯"
                                    : item.imgType == 115
                                      ? "左前轮"
                                      : item.imgType == 116
                                        ? "左后轮"
                                        : item.imgType == 117
                                          ? "车门"
                                          : item.imgType == 118
                                            ? "右前轮"
                                            : item.imgType == 119
                                              ? "右后轮"
                                              : item.imgType == 1111
                                                ? "左后45度角"
                                                : item.imgType == 1112
                                                  ? "右前45角"
                                                  : item.imgType == 1113
                                                    ? "车辆正面"
                                                    : item.imgType == 1114
                                                      ? "车辆后面"
                                                      : item.imgType == 1115
                                                        ? "车辆左边"
                                                        : item.imgType == 1116
                                                          ? "车辆右边"
                                                          : item.imgType == 121
                                                            ? "其他选拍"
                                                            : ""
              }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row
          v-if="getVehicleImage.insideImage"
          style="padding-left:30px"
          :gutter="20"
        >
          <p style="padding-left: 30px;line-height: 50px;font-weight: 800;">
            车辆内饰
          </p>
          <el-col
            v-for="item in getVehicleImage.insideImage"
            :key="item.imgType"
            :span="8"
          >
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="item.imageUrl"
                  :preview-src-list="[item.imageUrl]"
                  alt=""
                />
              </span>
              <span>{{
                item.imgType == 101
                  ? "车辆左前45度角"
                  : item.imgType == 102
                    ? "车辆右后45度角"
                    : item.imgType == 103
                      ? "主驾前侧"
                      : item.imgType == 104
                        ? "主驾后侧"
                        : item.imgType == 105
                          ? "副驾前侧"
                          : item.imgType == 106
                            ? "副驾后侧"
                            : item.imgType == 111
                              ? "左前大灯"
                              : item.imgType == 112
                                ? "右前大灯"
                                : item.imgType == 113
                                  ? "左尾灯"
                                  : item.imgType == 114
                                    ? "右尾灯"
                                    : item.imgType == 115
                                      ? "左前轮"
                                      : item.imgType == 116
                                        ? "左后轮"
                                        : item.imgType == 117
                                          ? "车门"
                                          : item.imgType == 118
                                            ? "右前轮"
                                            : item.imgType == 119
                                              ? "右后轮"
                                              : item.imgType == 1111
                                                ? "左后45度角"
                                                : item.imgType == 1112
                                                  ? "右前45角"
                                                  : item.imgType == 1113
                                                    ? "车辆正面"
                                                    : item.imgType == 1114
                                                      ? "车辆后面"
                                                      : item.imgType == 1115
                                                        ? "车辆左边"
                                                        : item.imgType == 1116
                                                          ? "车辆右边"
                                                          : item.imgType == 121
                                                            ? "其他选拍"
                                                            : ""
              }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row
          v-if="getVehicleImage.chassisImage"
          style="padding-left:30px"
          :gutter="20"
        >
          <p style="padding-left: 30px;line-height: 50px;font-weight: 800;">
            机舱底盘
          </p>
          <el-col
            v-for="item in getVehicleImage.chassisImage"
            :key="item.imgType"
            :span="8"
          >
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <el-image
                  style="width: 200px;height: 200px;"
                  :src="item.imageUrl"
                  :preview-src-list="[item.imageUrl]"
                  alt=""
                />
              </span>
              <span>{{
                item.imgType == 101
                  ? "车辆左前45度角"
                  : item.imgType == 102
                    ? "车辆右后45度角"
                    : item.imgType == 103
                      ? "主驾前侧"
                      : item.imgType == 104
                        ? "主驾后侧"
                        : item.imgType == 105
                          ? "副驾前侧"
                          : item.imgType == 106
                            ? "副驾后侧"
                            : item.imgType == 111
                              ? "左前大灯"
                              : item.imgType == 112
                                ? "右前大灯"
                                : item.imgType == 113
                                  ? "左尾灯"
                                  : item.imgType == 114
                                    ? "右尾灯"
                                    : item.imgType == 115
                                      ? "左前轮"
                                      : item.imgType == 116
                                        ? "左后轮"
                                        : item.imgType == 117
                                          ? "车门"
                                          : item.imgType == 118
                                            ? "右前轮"
                                            : item.imgType == 119
                                              ? "右后轮"
                                              : item.imgType == 1111
                                                ? "左后45度角"
                                                : item.imgType == 1112
                                                  ? "右前45角"
                                                  : item.imgType == 1113
                                                    ? "车辆正面"
                                                    : item.imgType == 1114
                                                      ? "车辆后面"
                                                      : item.imgType == 1115
                                                        ? "车辆左边"
                                                        : item.imgType == 1116
                                                          ? "车辆右边"
                                                          : item.imgType == 121
                                                            ? "其他选拍"
                                                            : ""
              }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row style="padding-left:30px" :gutter="20">
          <p style="padding-left: 30px;line-height: 50px;font-weight: 800;">
            车辆视频
          </p>
          <el-col :span="8">
            <div
              style="flex-direction: column;display: flex;align-items: center;justify-content: center;"
            >
              <span>
                <video
                  :src="getVehicleImage.videoUrl"
                  controls="controls"
                  style="    width: 300px;
    height: 300px;"
                />
              </span>
            </div>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="车况描述" name="6">
        <el-row style="padding-left:30px" :gutter="20">
          <el-col
            :span="8"
          ><span>动力状况:{{
            getVehicleCondition.powerLevel == 0
              ? "优"
              : getVehicleCondition.powerLevel == 1
                ? "良"
                : getVehicleCondition.powerLevel == 2
                  ? "差"
                  : ""
          }}</span></el-col>
          <el-col
            :span="8"
          ><span>功能状况 :{{
            getVehicleCondition.functionsLevel == 0
              ? "优"
              : getVehicleCondition.functionsLevel == 1
                ? "良"
                : getVehicleCondition.functionsLevel == 2
                  ? "差"
                  : ""
          }}</span></el-col>
          <el-col
            :span="8"
          ><span>外观状况 :
            {{
              getVehicleCondition.facadeLevel == 0
                ? "优"
                : getVehicleCondition.facadeLevel == 1
                  ? "良"
                  : getVehicleCondition.facadeLevel == 2
                    ? "差"
                    : ""
            }}</span></el-col>
          <el-col
            :span="8"
          ><span>车辆内饰 :
            {{
              getVehicleCondition.innerLevel == 0
                ? "优"
                : getVehicleCondition.innerLevel == 1
                  ? "良"
                  : getVehicleCondition.innerLevel == 2
                    ? "差"
                    : ""
            }}</span></el-col>
          <el-col
            :span="8"
          ><span>事故等级 :
            {{
              getVehicleCondition.accidentLevel == 1
                ? "优"
                : getVehicleCondition.accidentLevel == 2
                  ? "良"
                  : getVehicleCondition.accidentLevel == 3
                    ? "差"
                    : getVehicleCondition.accidentLevel == 4
                      ? "差"
                      : ""
            }}</span></el-col>
        </el-row>
        <el-row style="padding-left:30px" :gutter="20">
          <el-col
            :span="24"
          ><span>车况介绍 : {{ getVehicleCondition.vehicleRemark }}</span></el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>

    <el-dialog
      v-dialogDrag
      title="报告详情"
      :visible.sync="dialogVisible"
      width="500px"
    >
      <header v-if="myinfo && info.status == 1">
        <p class="title">订单已取消</p>
        <p class="desc">暂无该车型的诊断记录</p>
      </header>
      <div v-if="myinfo && info.status == 2" class="content">
        <div class="top"><span class="tips" />订单信息</div>
        <div class="item">
          <div class="left">订单编号</div>
          <div class="right">{{ myinfo.orderNo }}</div>
        </div>
        <div class="item">
          <div class="left">创建时间</div>
          <div class="right">{{ myinfo.createTime }}</div>
        </div>
        <div class="item">
          <div class="left">支付时间</div>
          <div class="right">{{ myinfo.payTime }}</div>
        </div>
        <div class="item">
          <div class="left">支付方式</div>
          <div class="right">{{ ["支付宝", "微信"][myinfo.payWay] }}</div>
        </div>
        <div class="item">
          <div class="left">支付金额</div>
          <div class="right">{{ myinfo.amount }}</div>
        </div>
        <div class="top"><span class="tips" />车辆信息</div>
        <div class="item">
          <div class="left">品牌</div>
          <div v-if=" myinfo.travelLicense && myinfo.travelLicense.brandModel " class="right">{{ myinfo.travelLicense.brandModel }}</div>
        </div>
        <div class="item">
          <div class="left">VIN</div>
          <div v-if="myinfo.travelLicense" class="right">{{ myinfo.travelLicense.vin }}</div>
        </div>
        <div class="item">
          <div class="left">车牌号</div>
          <div v-if="myinfo.travelLicense" class="right">{{ myinfo.travelLicense.vehicleNo }}</div>
        </div>
        <div class="item">
          <div class="left">发动机号</div>
          <div v-if="myinfo.travelLicense" class="right">{{ myinfo.travelLicense.engineCode }}</div>
        </div>
        <div class="item">
          <div class="left">报告生成时间</div>
          <div v-if="myinfo" class="right">{{ myinfo.reportTime }}</div>
        </div>
        <div class="top">
          <span class="tips" />非4S店诊断记录
          <span style="float:right">{{ myinfo.totalNumber }}</span>
        </div>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item
            v-for="(item, index) in myinfo.faultCodeList"
            :key="index"
            :title="item.recordTime"
            :name="index"
          >
            <template slot="title">
              &nbsp; &nbsp; &nbsp;{{ item.recordTime }}
              <span class="myRight">{{ item.diagnosisList.length }}</span>
            </template>
            <div
              v-for="(items, i) in item.diagnosisList"
              :key="i"
              class="box-content"
            >
              <div class="items">
                <div class="left">故障码</div>
                <div class="right">{{ items.code }}</div>
              </div>
              <div class="items">
                <div class="left">故障系统</div>
                <div class="right">{{ items.systemName }}</div>
              </div>
              <div class="items">
                <div class="left">故障描述</div>
                <div class="right">{{ items.systemName }}</div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div v-if="myinfo && info.status == 1" class="content">
        <div class="top"><span class="tips" />退款信息</div>
        <div class="item">
          <div class="left">退款方式</div>
          <div class="right">{{ ["支付宝", "微信"][info.refundWay] }}</div>
        </div>
        <div class="item">
          <div class="left">退款时间</div>
          <div class="right">{{ info.refundTime }}</div>
        </div>
        <div class="item">
          <div class="left">退款金额</div>
          <div class="right">{{ info.refundAmount }}</div>
        </div>
        <div class="item">
          <div class="left">退款订单号:</div>
          <div class="right">{{ info.refundOrderNo }}</div>
        </div>
        <div class="top"><span class="tips" />订单信息</div>
        <div class="item">
          <div class="left">订单编号</div>
          <div class="right">{{ myinfo.orderNo }}</div>
        </div>
        <div class="item">
          <div class="left">创建时间</div>
          <div class="right">{{ myinfo.createTime }}</div>
        </div>
        <div class="item">
          <div class="left">支付时间</div>
          <div class="right">{{ myinfo.payTime }}</div>
        </div>
        <div class="item">
          <div class="left">支付方式</div>
          <div class="right">{{ ["支付宝", "微信"][myinfo.payWay] }}</div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      v-dialogDrag
      class="isred"
      title="报告详情"
      :visible.sync="dialogVisibleFrom"
      width="500px"
    >
      <div v-if="myinfo" class="content">
        <div class="top"><span class="tips" />车辆信息</div>
        <div class="item">
          <div class="left">品牌</div>
          <div v-if="myinfo.brandModel" class="right">{{ myinfo.brandModel }}</div>
        </div>
        <div class="item">
          <div class="left">里程</div>
          <div class="right">{{ myinfo.mileage }}</div>
        </div>
        <div class="item">
          <div class="left">VIN</div>
          <div class="right">{{ myinfo.vin }}</div>
        </div>
        <div class="item">
          <div class="left">车牌号</div>
          <div class="right">{{ myinfo.vehicleNo }}</div>
        </div>
        <div class="item">
          <div class="left">发动机号</div>
          <div class="right">{{ myinfo.engineCode }}</div>
        </div>
        <div class="item">
          <div class="left">报告生成时间</div>
          <div class="right">{{ myinfo.reportTime }}</div>
        </div>
        <div class="top"><span class="tips" />里程趋势分析</div>
        <div id="mycharts" style="width:450px;height:300px" />
        <div class="top"><span class="tips" />里程记录</div>
        <table>
          <tr>
            <th>记录时间</th>
            <th>里程数值(万公里)</th>
          </tr>
          <tr v-for="(item, i) in myinfo.mileages" :key="i">
            <td>{{ item.recordTime }}</td>
            <td>{{ item.mileage }}</td>
          </tr>
        </table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      activeNames: ['1', '2', '3'],
      data: {},
      checked1: false,
      checked2: false,
      getBasicInfo: {},
      getVehicleCondition: {},
      getVehicleImage: {},
      getVehicleSaleInfo: {},
      dialogVisible: false,
      dialogVisibleFrom: false,
      myinfo: {},
      info: {}
    }
  },
  async created() {
    await this.inquire()
  },
  methods: {
    handleChange(val) {
      console.log(val)
    },
    inquire() {
      // 上架车辆详情
      this.$get(
        '/web/vehicleOnSale/details?carInfoId=' + this.$route.query.carInfoId
      ).then(res => {
        if (res.data.code === '0') {
          this.data = res.data.data
        }
      })
      // 车辆基础信息
      this.$get(
        '/web/vehicleInfo/getBasicInfo?carInfoId=' + this.$route.query.carInfoId
      ).then(res => {
        if (res.data.code === '0') {
          this.getBasicInfo = res.data.data
        }
      })
      // 车辆车况描述
      this.$get(
        '/web/vehicleInfo/getVehicleCondition?carInfoId=' +
          this.$route.query.carInfoId
      ).then(res => {
        if (res.data.code === '0') {
          this.getVehicleCondition = res.data.data
        }
      })
      // 车辆相关图片信息
      this.$get(
        '/web/vehicleInfo/getVehicleImage?carInfoId=' +
          this.$route.query.carInfoId
      ).then(res => {
        if (res.data.code === '0') {
          this.getVehicleImage = res.data.data
        }
      })
      // 车辆交车设置/出售信息
      this.$get(
        '/web/vehicleInfo/getVehicleSaleInfo?carInfoId=' +
          this.$route.query.carInfoId
      ).then(res => {
        if (res.data.code === '0') {
          this.getVehicleSaleInfo = res.data.data
        }
      })
    },
    gotoUrl(text, id) {
      if (text === '非4S店诊断记录查询') {
        this.dialogVisible = true
        this.$get(`/web/carVinReport/getOrderDetail?id=${id}`).then(res => {
          if (res.data.code === '0') {
            this.info = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
        this.$get(`app/carVinReport/getFaultCodeDetail?id=${id}`).then(res => {
          console.log(res)
          if (res.data.code === '0') {
            this.myinfo = res.data.data
            console.log(this.myinfo)
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else if (text === '调表查询') {
        this.dialogVisibleFrom = true

        this.$get(
          `app/dashboard/getDetails?orderNo=${id}`
        ).then(res => {
          console.log(res)
          if (res.data.code === '0') {
            this.myinfo = res.data.data
            console.log(this.myinfo)

            this.$nextTick(() => {
              this.chart = echarts.init(document.getElementById('mycharts'))
              console.log(this.chart)
              // const time = this.myinfo.mileages.map(item => item.recordTime)
              const mileage = this.myinfo.mileages.map(item =>
                Number(item.mileage)
              )
              const index = mileage.indexOf(Math.max(...mileage))
              console.log(index)
              // 指定图表的配置项和数据
              var option = {
                // 标题
                title: {
                  text: '里程记录疑似调表'
                },
                // 工具箱
                // 保存图片
                toolbox: {
                  show: true,
                  feature: {
                    saveAsImage: {
                      show: true
                    }
                  }
                },
                // 图例-每一条数据的名字叫销量
                legend: {
                  data: ['本车里程曲线']
                },
                dataZoom: [
                  {
                    type: 'slider',
                    xAxisIndex: 0,
                    filterMode: 'none'
                  }
                ],

                // x轴
                xAxis: {
                  data: this.myinfo.mileages.map(item => item.recordTime)
                },
                // y轴没有显式设置，根据值自动生成y轴
                yAxis: {},
                // 数据-data是最终要显示的数据
                series: [
                  {
                    name: '本车里程曲线',
                    type: 'line',
                    data: this.myinfo.mileages.map(item => item.mileage),
                    itemStyle: { normal: { label: { show: true }}}
                    // markPoint: {
                    //   data: [
                    //     { xAxis: time[index], yAxis: mileage[index], value: '异常' }
                    //   ]
                    // }
                  }
                ]
              }
              this.chart.setOption(option)
            })
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        window.open(id)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.box /deep/ {
  // padding: 20px;
  margin: 30px;
  border-left: 1px solid #e6ebf5;
  border-right: 1px solid #e6ebf5;
  .firstCar {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .el-collapse-item__header {
    padding-left: 20px;
  }
}
.box {
  .el-form-item {
    /deep/ .el-form-item__label {
      font-weight: 700 !important;
    }
  }

  width: 80%;
  margin: 0 auto;
  .title {
    position: relative;
    height: 80px;
    font-size: 24px;
    line-height: 80px;
    text-align: center;
    .btn {
      position: absolute;
      right: 0;
      top: 25px;
    }
  }
  label {
    width: 200px;
    display: inline-block;
    text-align: center;
  }
  .content {
    height: 800px;
    position: relative;
    width: 450px;
    overflow: hidden;
    overflow-y: auto;
    .top {
      height: 60px;
      padding: 0 12px;
      line-height: 60px;
      .tips {
        transform: translateY(5px);
        width: 5px;
        height: 26px;
        opacity: 1;
        display: inline-block;
        margin-right: 13px;
        border: 3px solid #f4b22d;
        background: #f4b22d;
        border-radius: 6px;
      }
      font-size: 16px;
      font-weight: 700;
      text-align: left;
      color: #323232;
    }
    .item {
      // height: 88px;
      // line-height: 44px;
      padding: 20px 31px;
      border-bottom: 1px solid #f1f1f1;
      display: flex;
      font-size: 16px;
      justify-content: space-between;
      .left {
        color: #919598;
      }
      .right {
        color: #323232;
      }
    }
    .items {
      padding: 10px 31px;
      // border-bottom: 1px solid #f1f1f1;
      display: flex;
      font-size: 16px;
      justify-content: space-between;
      .left {
        color: #919598;
      }
      .right {
        color: #323232;
      }
    }
    .myContent {
      .item {
        height: 44px;
        line-height: 1px;
        padding: 20px 31px;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        font-size: 16px;
        justify-content: space-between;
        .left {
          color: #919598;
        }
        .right {
          color: #323232;
        }
      }
    }

    button {
      margin-right: 10px;
      font-size: 16px;
      width: 80px;
      height: 40px;
      opacity: 0.6;
      background: #f1f1f1;
      margin-bottom: 10px;
      border-radius: 6px;
      cursor: pointer;
      border: none;
      &.activeColor {
        opacity: 1;
        background: #f4b22d;
        border-radius: 6px;
      }
    }
    .contentDefault {
      height: 392px;
      // width: 100vw;
      padding: 30px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
  }
}
.isred{

 .content {
    height: 800px;
    position: relative;
    width: 450px;
    overflow: hidden;
    overflow-y: auto;
    .top {
      height: 60px;
      padding: 0 12px;
      line-height: 60px;
      .tips {
        transform: translateY(5px);
        width: 5px;
        height: 26px;
        opacity: 1;
        display: inline-block;
        margin-right: 13px;
        border: 3px solid #f4b22d;
        background: #f4b22d;
        border-radius: 6px;
      }
      font-size: 16px;
      font-weight: 700;
      text-align: left;
      color: #323232;
    }
    .item {
      // height: 88px;
      // line-height: 44px;
      padding: 20px 31px;
      border-bottom: 1px solid #f1f1f1;
      display: flex;
      font-size: 16px;
      justify-content: space-between;
      .left {
        color: #919598;
      }
      .right {
        color: #323232;
      }
    }
    .items {
      padding: 10px 31px;
      // border-bottom: 1px solid #f1f1f1;
      display: flex;
      font-size: 16px;
      justify-content: space-between;
      .left {
        color: #919598;
      }
      .right {
        color: #323232;
      }
    }
    .myContent {
      .item {
        height: 44px;
        line-height: 1px;
        padding: 20px 31px;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        font-size: 16px;
        justify-content: space-between;
        .left {
          color: #919598;
        }
        .right {
          color: #323232;
        }
      }
    }

    button {
      margin-right: 10px;
      font-size: 16px;
      width: 80px;
      height: 40px;
      opacity: 0.6;
      background: #f1f1f1;
      margin-bottom: 10px;
      border-radius: 6px;
      cursor: pointer;
      border: none;
      &.activeColor {
        opacity: 1;
        background: #f4b22d;
        border-radius: 6px;
      }
    }
    .contentDefault {
      height: 392px;
      // width: 100vw;
      padding: 30px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
  }
}

</style>
